<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<button>按钮</button>

		<script>
			let obj = {
				name: 'vae',
			};

			function fn(a, b) {
				console.log(this);
				console.log(a + b);
			}

			let f = fn.bind(obj, 1, 2);
			f();
			// 1. bind 不会调用原来的函数  但可以改变函数内部 this 指向
			// 2. 返回值是原函数改变 this 之后产生的新函数
			// 3. 如果有的函数不需要立即调用，又想改变这个函数内部 this 指向，此时用 bind 最方便
			// eg：一个按钮，点击后禁用这个按钮，3 秒后再开启这个按钮
			const btn = document.querySelector('button');
			btn.onclick = function () {
				this.disabled = true; // 这个 this 指向 btn
				// let that = this;
				setTimeout(
					function () {
						// this.disabled = false; // 定时器里的 this 指向的是 window
						this.disabled = false; // 这个 this 指向的是 btn
					}.bind(this), // 这个 this 指向的是 btn 这个对象
					3000
				);
			};
		</script>
	</body>
</html>
